<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="product-cell" :class="product.type">
    <div class="product-container-box">
      <div class="product-img">
        <img @click.stop="showImg" v-bind:src="product.type=='product-cell-3'?product.image:product.horImage">
      </div>
      <div v-if="showInfo" class="product-info">
        <div v-if="product.productNo != 0" class="product-order">
          <p>TOP</p>
          <p>{{product.productNo}}</p>
        </div>
        <div class="product-name">
          <p>{{product.name}}</p>
          <p>{{product.price | currency}}</p>
        </div>
      </div>
      <div class="product-btn" v-bind:class="showInfo?withInfo:noInfo">
        <img @click.stop="del" v-if="product.cartNum > 0" class="del-img" src="./../../../images/ic_del.png" alt="">
        <span v-if="product.cartNum > 0">{{product.cartNum}}</span>
        <img class="add-img" @click.stop="add" src="http://static.52letsgo.cn/zz/wechatimg/ic_add.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
  import {fmoney} from './../../../commons/js/utils'
  export default{
    data(){
      return {
        show: false,
        noInfo: "no-info-btn",
        withInfo: "with-info-btn"
      }
    },
    props: {
      productNo: Number,
      product: {
        type: Object,
        default () {
          return;
        }
      },
      showTop: 0,
      showInfo: {
        type: Boolean,
        default(){
          return true;
        }
      }
    },
    methods: {
      add() {
        this.$emit('add', this.productNo);
      },
      del(){
        this.$emit('del', this.productNo);
      },
      showImg(){
        this.$emit('show-popup', this.productNo, this.product.bigImage);
      }
    },
    filters:{
      currency:function (value) {
        if (!value) return ''
        value = fmoney(value,2);
        return ("¥"+value)
      }
    }
  }
</script>
<style lang="less">
  .product-cell {
    width: 100%;
    position: relative;
  }

  .product-cell .product-container-box {
    padding: 0.2rem;
  }

  .product-cell .product-img {
    width: 100%;
    height: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 50%;
    /*background: url("./../../../assets/img/bg_cache_banner.png") no-repeat;*/
    /*background-size: 100%;*/
    background: white;
  }

  .product-cell .product-info {
    height: 4rem;
    border: solid #EEEEEE 0.1rem;
    border-top: 0;
    display: flex;
    padding: 0.5rem;
  }

  .product-cell .product-info .product-order {
    height: 100%;
    width: 3rem;
    line-height: 2rem;
    font-size: 1.2rem;
    text-align: center;
    color: white;
  }

  .product-cell-1 .product-info .product-order {
    background: red;
  }

  .product-cell-2 .product-info .product-order {
    background: orange;
  }

  .product-cell-3 .product-info .product-order {
    background: black;
  }

  .product-cell .product-info .product-name {
    flex: 1;
    display: flex;
    line-height: 2rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 1rem;
    font-size: 1.5rem;
  }

  .product-cell .product-info .product-name p {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .product-cell-3 {
    width: 50%;

  }

  .product-cell-3 .product-img {
    width: 100%;
    padding-bottom: 133.33%;
    background: white;
    /*background: url("./../../../assets/img/bg_cache_mall.png") no-repeat;*/
    /*background-size: cover;*/
  }

  .product-cell-3 .product-info {
    height: 4rem;
    padding: 0.5rem;
    border: solid #EEEEEE 0.1rem;
    border-top: 0px;
    display: flex;
    font-size: 0.8rem;
  }

  .product-cell-3 .product-info .product-order {
    height: 100%;
    width: 2.5rem;
    line-height: 2rem;
    font-size: 1.8rem;
    text-align: center;
    color: white;
  }

  .product-cell-3 .product-info .product-name {
    font-size: 1.8rem;
    line-height: 2rem;

  }

  .product-cell .product-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .product-cell .product-btn {
    position: absolute;
    height: 3rem;
    /*width: 25px;*/
    background: rgba(43, 43, 43, 0.8);
    right: 1.5rem;
    bottom: 7.5rem;
    border-radius: 2rem;
    display: flex;
    justify-content: space-between;
  }

  .product-cell .product-btn span {
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.6rem;
    line-height: 3rem;
    color: white;
    text-align: center;
  }

  .product-cell .product-btn img {
    height: 3rem;
    width: 3rem;
    display: block;
  }

  .product-cell-3 .with-info-btn {
    bottom: 6.5rem;
  }

  .product-cell-3 .no-info-btn {
    bottom: 2rem;
  }

</style>
